<template>
  <div class="Video">
    <!-- <h1 class="title">猫眼电影</h1> -->
    <div class="title2">
        <div class="p2"><img src="../assets/2.1.jpeg" alt="" width="30px">猫眼</div>
        <div>发现最新最热电影</div>
        <div><p class="p1">打开APP&gt;</p> </div>
    </div>

    <div class="container">
      <a href="https://i.maoyan.com/asgard/live/index?id=11292975">
        <div class="short-video-item" style="background-image:url(http://p0.meituan.net/moviemachine/bc8a6de010030f821e8d9cc4466d83f2699471.png)">
        <div class="tl">好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看</div>
        <div class="dif">
          <img src="../assets/2.1.jpeg" alt="" width="21">
          <div class="user">猫眼娱乐</div>
        </div>
        </div>
        </a>

      <a href="https://i.maoyan.com/asgard/live/index?id=11104180">  
       <div class="short-video-item" style="background-image:url(http://p1.meituan.net/moviemachine/d9c8223bec200f866294f1281a1a3808438670.png)">
       <div class="tl">好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看</div>
        <div class="dif">
          <img src="../assets/2.1.jpeg" alt="" width="21">
          <div class="user">猫眼娱乐</div>
        </div>
        </div>
        </a>

       <a href="https://i.maoyan.com/asgard/live/index?id=11224023">
       <div class="short-video-item" style="background-image:url(http://p0.meituan.net/moviemachine/ca2b0fce3ca481c8f3a9be91406d8767346970.png)">
       <div class="tl">好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看</div>
        <div class="dif">
          <img src="../assets/2.1.jpeg" alt="" width="21">
          <div class="user">猫眼娱乐</div>
        </div>
       </div>
       </a>

       <a href="https://i.maoyan.com/asgard/live/index?id=11108734">
       <div class="short-video-item" style="background-image:url(http://p0.meituan.net/movie/2568404541f3c28f73d55ae196c7d50a37278.jpg)">
       <div class="tl">好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看</div>
        <div class="dif">
          <img src="../assets/2.1.jpeg" alt="" width="21">
          <div class="user">猫眼娱乐</div>
        </div>
       </div>
       </a>

       <a href="https://i.maoyan.com/asgard/live/index?id=11170002">
       <div class="short-video-item" style="background-image:url(&quot;http://p1.meituan.net/movie/b3cc3b4417390d8dac8038915bc29f3925959.jpg&quot;)">
       <div class="tl">《五金家族》张译主演新电影即将上映，不得不说这90年代穿搭适配度太高啦</div>
       <div class="dif">
          <img src="../assets/2.1.jpeg" alt="" width="21">
          <div class="user">猫眼娱乐</div>
        </div>
       </div>
       </a>

       <a href="https://i.maoyan.com/asgard/live/index?id=8128887">
       <div class="short-video-item" style="background-image:url(http://p0.meituan.net/moviemachine/d32149d5d4923cd30783814505efab28216200.png)">
        <div class="tl">好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看</div>
       <div class="dif">
          <img src="../assets/2.1.jpeg" alt="" width="21">
          <div class="user">猫眼娱乐</div>
        </div>
       </div>
       </a>

       <a href="https://i.maoyan.com/asgard/live/index?id=11262978">
       <div class="short-video-item" style="background-image:url(http://p0.meituan.net/moviemachine/d4ac09fef9a86b55573bf80deaa60625316408.png)">
        <div class="tl">好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看</div>
       <div class="dif">
          <img src="../assets/2.1.jpeg" alt="" width="21">
          <div class="user">猫眼娱乐</div>
        </div>
       </div>
       </a>

       <a href="https://i.maoyan.com/asgard/live/index?id=11283555">
       <div class="short-video-item" style="background-image:url(&quot;http://p1.meituan.net/movie/c6081b07b99a19c34146ba5f53688a5789496.jpg&quot;)">
        <div class="tl">好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看好看</div>
       <div class="dif">
          <img src="../assets/2.1.jpeg" alt="" width="21">
          <div class="user">猫眼娱乐</div>
        </div>
       </div>
       </a>

    </div>
  </div>
</template>

<style>
.container{
  margin-bottom: 39px;
}

.title{
    background-color: red;
    text-align: center;
    color: white;
    font-size: 25px;
    font-weight: bolder;

}
.title2{
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-weight: bolder;
    font-size: 16px;
    height: 3rem;
    background-color: white;
    border-bottom: 1px solid gray;
}
.p1,.p2{
    display: inline;
    color: red;
}
.short-video-item {
    position: relative;
    display: inline-block;
    width: 49.5%;
    height: 15rem;
    background-position: 50%;
    background-size: cover;
}
.tl{
  position: absolute;
  bottom: 3rem;
  color: white;
  width: 100%;
  overflow: hidden;
  white-space:nowrap;
  text-overflow: ellipsis;

}
.dif{
  display: flex;
  align-items: center;
  bottom: 0.2rem;
  font-size: 0.16rem;
  position: absolute;
  width: 3.4rem;
  margin: 0.5rem;
  color: white;
}
.user{
  flex: 1;
  display: inline-block;
  margin: 0.25rem;
  white-space: nowrap;

}



</style>